<template>
  <section class="h100 finance-panel">
    <van-row class="header-panel">
      平台币充值
      <div class="arrow" @click="goBack()" v-if="isShow != 0">
        <van-icon name="arrow-left"/>
      </div>
    </van-row>
    <van-row class="platform-panel">
      <van-row class="left">当前平台币余额</van-row>
      <van-row class="right">{{ Math.round(platformCoin * 100) }}</van-row>
    </van-row>
    <van-row class="pay-panel">
      <van-row class="title">充值金额</van-row>
      <van-row class="money-list">
        <div :class="['item',payKey===index&&'on']" v-for="(item,index) in moneyList" :key="index"
             @click="onPayMoney(index,item.value)">
          <template v-if="item.custom">
            <van-field v-model="customPayMoney" type="number" :placeholder="payPlaceholder"/>
          </template>
          <template v-else>{{ item.value }}</template>
        </div>
      </van-row>
<!--      <van-row class="content-tips" style="font-size: 14px;-->
<!--      color: #F0322B;-->
<!--      margin-bottom: 15px;" v-if="contentList">-->
<!--        限时折扣：<div  v-for="(item,index) in contentList">-->
<!--          <p>{{index+1}}、{{item}}</p>-->
<!--        </div>-->

<!--      </van-row>-->
      <van-row class="content-tips" v-if="contentList != '' && contentLists == ''">
                <van-row class="title">限时折扣：</van-row>
                <div  v-for="(item,index) in contentList">
                  <p>{{index+1}}、{{item}}</p >
                </div>
              </van-row>
      <van-row class="content-tips" v-if="contentList == '' && contentLists != ''">
                <van-row class="title">限时优惠：</van-row>
                <div  v-for="(item,index) in contentLists">
                  <p>{{index+1}}、{{item}}</p >
                </div>
              </van-row>
      <van-row class="money-tips">
        <p class="blod">充值比例：1人民币=100平台币</p>
        <p>平台币通用于所有游戏，一经充值不可退款。</p>
      </van-row>
      <van-row class="title">充值方式</van-row>
      <van-row class="way-list">
        <div class="item" @click="onPayHandel('weixin')">
          <img :src="require('../../assets/images/icon/wechat.png')"/> 微信
        </div>
        <div class="item" @click="onPayHandel('zhifubao')">
          <img :src="require('../../assets/images/icon/aipay.png')"/> 支付宝
        </div>
<!--        <div class="item" @click="onPayHandel('user_money')">-->
<!--          <img :src="require('../../assets/images/icon/wallet.png')"/> 余额-->
<!--        </div>-->
      </van-row>
    </van-row>
  </section>
</template>

<script>

import {BRStorage} from "../../utils/brStorage";

export default {
  data() {
    return {
      isShow: 1,
      platformCoin: 0,
      payKey: 0,
      payMoney: 20,
      customPayMoney: "",
      payPlaceholder: '自定义',
      moneyList: [
        {
          value: 20
        },
        {
          value: 50
        },
        {
          value: 100
        },
        {
          value: 200
        },
        {
          value: 500
        },
        {
          value: 0,
          custom: true
        }
      ],
      contentList: [

      ],
      contentLists: [

      ]

    }
  },

  created() {
    if(this.$route.query.isShow==undefined){
      this.isShow = 1;
    }else{
      this.isShow = this.$route.query.isShow;
    }

    // console.log(this.isShow)
    this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      this.platformCoin = BRStorage.getStorage(BRStorage.KeyBRPlatformCoin());
      this.$http(window.config.payPhoneApi + '/platform_coin/content').then((res) => {
        if(res.data.description){
          this.contentList = res.data.description;
        }else{
          this.contentList = "";
        }

      })
      this.$http(window.config.payPhoneApi + '/platform_coin/contents').then((res) => {
        if(res.data.description){
          this.contentLists = res.data.description;
        }else{
          this.contentLists = "";
        }

      })
    },

    //选择支付金额
    onPayMoney(key, value) {
      this.payKey = key;
      this.payPlaceholder = key === 5 ? '' : '自定义'
      if (key !== 5) {
        this.payMoney = value;
      } else {
        this.payMoney = this.customPayMoney;
      }
    },
    onPayHandel(payWayCode) {
      if (this.payKey === 5) {
        this.payMoney = this.customPayMoney;
      }
      if (!this.BRIsSetString(this.payMoney)) {
        this.BRToast("请选择充值金额");
        return;
      }
      if (this.payMoney > 30000) {
        this.BRToast("充值金额不能大于3万");
        return;
      }
      let orderMoneyFen = this.payMoney * 100;
      let params = {
        orderMoneyFen: orderMoneyFen,
        payWayCode: payWayCode,
        userToken:'NWZhMmk2N2ltRkVjTEM1aFZBUERNLzJkSmQ3NVpacUE0WUxESDRvQkFoSXF3Y0lZdkF0Z3U2Rk81SlZFZzBDaWtpOTE'
      }
      this.$http(window.config.payPhoneApi + '/platform_coin/order', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
          return;
        }
        let orderData = res.data;
        window.location.href = orderData['redUrl'];
      });
    },

    //返回
    goBack() {
      this.$router.push('/account/home');
    },
  }
};
</script>

<style lang='less'>
@import "../../assets/css/finance/index.less";
.content-tips{
  font-size: 14px;
  color: #FF8020;
  margin-bottom: 15px;
   padding: 12px;
  background-color: rgba(255, 128, 32, 0.1);
  border-radius: 12px;
}
.content-tips .title{
color: #FF8020 !important;
  margin-bottom: 4px;
}
</style>
